<!--
 * @Description: 图片组件
 * @Author:: luoguomei
-->
<!-- 图片组件 -->
<template>
  <div class="picture-panel" :style="`opacity:${stylesForm.opacity / 100};color:#ffffff`">
    <a-image
      width="100%"
      height="100%"
      :src="stylesForm.url ? stylesForm.url : noImageUrl"
      :preview="false"
      @click="handleImg"
    />
  </div>
</template>

<script setup>
import noImageUrl from './images/noImage.png';
import { watch, ref, onMounted, onUnmounted, computed } from 'vue';
import { cloneDeep } from 'lodash';
import { useBigScreenStore } from '@/stores/bigScreen';
const store = useBigScreenStore()
const props = defineProps({
  value: {
    type: String,
  },
  styles: {
    type: [Object, Array],
    default: () => ({}), // 默认空对象
  },
  isOperable: {
    type: Number,
    default: 0
  },
  loopTimer: {
    type: Number,
    default: 0
  }
});
const baseUrl = ref() // 记录原始的imgUrl
let stylesForm = ref({});
let intervalId = null; // 保存定时器 ID
const handleImg = () => {
  console.log(store.screenState.count);
}
// 定时刷新逻辑
const startImageReload = (interval) => {
  if (intervalId) clearInterval(intervalId); // 清除已有定时器
  intervalId = setInterval(() => {
    // 触发 src 的重新计算
    const timestamp = new Date().getTime();
    stylesForm.value.url = `${baseUrl.value}?t=${timestamp}`; // 保持原值，只为触发响应
    console.log(stylesForm.value.url);
    
  }, interval);
};

// 清理定时器
onUnmounted(() => {
    console.log('onUnmounted');
    if (intervalId) clearInterval(intervalId);
});
onMounted(() => {
  // 初始化定时刷新
  if(props.loopTimer > 0 && props.isOperable === 1) {
    startImageReload(props.loopTimer * 1000);
  }
});
// 监听 props.styles 的变化
watch(
  () => props.styles,
  (val) => {
    stylesForm.value = cloneDeep(val);
    baseUrl.value = val.url
    console.log(' baseUrl.value',  baseUrl.value);
    
  },
  {
    immediate: true,
    deep: true,
  }
);
</script>

<style lang="scss" scoped>
.picture-panel {
  width: 100%;
  height: 100%;
}
</style>
